<template>
	<view class="content bg-f7">
		<view class="wrap border-radio-14" v-for="(item, index) in list" :key="item.id">
			<view class="info justifyContent-spaceBetween align-items-center">
				<view class="flex-1" @click="handleItemSelect(item)">
                    <view class="top flex-box justify-between">
                        <view class="flex-box align-items-center">
                            <view class="fs-30 fw-b color-0 margin-r-20">{{item.name}}</view>
                            <view class="fs-30 fw-b color-0">{{item.mobile}}</view>
                            <view class="default margin-l-20 fs-22 color-white" v-if="item.is_default">默认</view>
                        </view>
                    </view>
                    <view class="bottom fs-26 color-4d">{{item.area}} {{item.address}}</view>
                </view>
                <view class="img-box" @click="handleEdit(item)"><image src="/static/image/address/edit.png"></image></view>
			</view>
		</view>
		<u-gap height="200"></u-gap>
		<view class="btn-wrap">
            <view class="add-btn fs-28 color-white align-items-center border-radio-14" @click="handleAdd">
				<image src="/static/image/address/add.png" mode="aspectFill" class="margin-r-20"></image>
                添加新地址
            </view>

		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			list: {
				type: Array
			}
		}, 
		methods: {
			handleAdd() {
				
				this.$emit('add', {})
			},
			handleItemSelect(item) {
				this.$emit('choose', item)
			},
			handleDefault(item) {
				this.$emit('setDefault', item)
			},
			handleEdit(item) {
				let info = item
				info.area = item.province + '-' + item.city + '-' + item.district 
				this.$emit('add', info)
			},
			handleDelete(item) {
				this.$emit('delete', item)
			},
			handleCityChange(e) {
				this.info.area = e.province.label + '-' + e.city.label + '-' + e.area.label;
				this.info.province = e.province.label
				this.info.city = e.city.label
				this.info.district = e.district.label
			},
			handleSubmit() {
				this.$emit('submit', this.info)
			}
		}
	}
</script>

<style lang="scss" scoped>

	.default {
        width: 62rpx;
        height: 28rpx;
        background: #43ABC4;
        border-radius: 4rpx;
        text-align: center;
        line-height: 28rpx;
    }
	.justify-between {
		justify-content: space-between;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.font-sm {
		font-size: 24rpx;
		color: #666;
	}
	.padding {
		padding: 30rpx;
	}
	.content {
		padding: 30rpx;
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;

		.wrap {
			background: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.top {
				.name {
					font-weight: bold;
				}
			}

			.bottom {
				margin-top: 16rpx;
			}

		}

		.btn-wrap {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			z-index: 9;
			text-align: center;
			width: 550rpx;
		}
	}
	.form-wrap {
		margin-top: 40rpx;
	}
    .add-btn {
        justify-content: center;
        width: 690rpx;
        height: 90rpx;
        background: #43ABC4;
        image {
            width: 30rpx;
            height: 30rpx;
        }
    }
    .img-box {

        min-width: 26rpx;
        image {
            width: 26rpx;
            height: 26rpx;
        }
    }
</style>